<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>弹性小球运动</title>
        <style>
            #ball {
                position: absolute;
                width: 100px;
                height: 100px;
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <div id="ball"></div>
        <script>
            (function() {
                var ball = document.getElementById('ball');//通过id ball来查找元素
                var xSpeed = 10;//x轴初始速度为10
                var ySpeed = 10;//y轴初始速度为10
                var isPaused = false;//定义一个变量isPaused，用于控制小球是否暂停移动，初始值为false。

                function randomColor() {
                    return 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')';
                }//定义一个函数randomColor，用于生成随机颜色。Math.random 用于生成一个0到255的随机数，Math.floor用于取整

                function updatePosition() {
                    if (!isPaused) {
                        var x = parseInt(ball.style.left) || 0;//尝试获取 ball 元素的 left 属性值，并将其转换为整数类型，如果无法获取到有效的值，则将 x 的值设为 0。
                        var y = parseInt(ball.style.top) || 0;

                        x += xSpeed;
                        y += ySpeed;

                        if (x < 0 || x > window.innerWidth - 100) {
                            xSpeed = -xSpeed;
                        }//判断小球的位置是否超出浏览器窗口的范围，如果超出范围，则改变小球的水平移动方向。

                        if (y < 0 || y > window.innerHeight - 100) {
                            ySpeed = -ySpeed;
                        }

                        ball.style.left = x + 'px';//更新小球的left和top样式，使其移动到新的位置。
                        ball.style.top = y + 'px';
                        ball.style.backgroundColor = randomColor();//将小球的背景颜色设置为随机颜色。
                    }
                }//定义一个函数updatePosition，用于更新小球的位置。

                document.addEventListener('mousedown', function(e) {
                    if (e.button === 0) { // 鼠标左键按下
                        isPaused = true;
                    } else if (e.button === 2) { // 鼠标右键按下
                        isPaused = true;
                    }
                });//鼠标按下，小球暂停 addEventListener在指定元素上添加事件监听器

                document.addEventListener('mouseup', function(e) {
                    if (e.button === 0) { // 鼠标左键放开
                        isPaused = false;
                        xSpeed += 1;
                        ySpeed += 1;
                    } else if (e.button === 2) { // 鼠标右键放开
                        isPaused = false;
                        xSpeed -= 1;
                        ySpeed -= 1;
                    }
                });//鼠标放开，小球运动。左键速度加一，右键速度减一

                setInterval(updatePosition, 100);//每隔100毫秒调用一次updatePosition函数，更新小球的位置。setInterval在指定的时间间隔内重复执行一段代码
            })();
        </script>
    </body>
</html>